<template>
    <van-nav-bar title="详情页" left-arrow background="#4fb78d" text-color="white" @click-left="$router.back()" />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in images" :key="index">
            <img style="width: 100%" :src="item" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
    </van-swipe>

    <div class="detail">
        <h2>{{ productObj.proname }}</h2>
        <p style="font-size: 20px;">
            {{ productObj.desc }}
        </p>
        <h3 style="color: red; font-size: 24px;">
            价格：￥{{ productObj.originprice }}.00
        </h3>
    </div>





    <!-- 底部按钮 -->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" text="加入购物车" @click="cartAdd()" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script>
import router from '@/router';
import { productDetailRequest } from '../../../api/homeApi'
import { addCartRequest } from '../../../api/cartApi'
export default {
    data() {
        return {
            productObj: {},
            images: [],
            userId: localStorage.getItem('mallFrontUserid')
        }
    },
    methods: {
        cartAdd() {
            // 修复：添加用户ID作为第一个参数
            addCartRequest(this.userId, this.$route.query.id).then(res => {
                console.log(res.data);
            })
        }
    },
    mounted() {


        console.log(this.$route.query.id);
        productDetailRequest(this.$route.query.id).then(res => {
            console.log(res.data);
            this.productObj = res.data.data
            this.images = res.data.data.imgs
        });




    }
}

</script>

<style>
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}

.detail {
    padding-bottom: 40px;
}
</style>